<template>
  <div class="wrap">
    <div class="wrap-left">
      <!--统计的卡片-->
      <div class="wrap-left-card">
        <section>
          <span
              :title="data.chinaAdd.localConfirmH5>=100000?data.chinaAdd.localConfirmH5:''">较上日+ {{
              data.chinaAdd.localConfirmH5
            }}</span>
          <!--数字太长时隐藏多余的-->
          <span
              :title="data.chinaAdd.localConfirmH5>=1000000000?data.chinaAdd.localConfirmH5:''">{{
              data.chinaTotal.localConfirm
            }}</span>
          <span>本土现有确诊</span>
        </section>

        <section>
          <span
              :title="data.chinaAdd.nowConfirm>=100000?data.chinaAdd.nowConfirm:''">较上日+ {{
              data.chinaAdd.nowConfirm
            }}</span>
          <span
              :title="data.chinaAdd.nowConfirm>=1000000000?data.chinaAdd.nowConfirm:''">{{
              data.chinaTotal.nowConfirm
            }}</span>
          <span>现有确诊</span>
        </section>
        <section>
          <span
              :title="data.chinaAdd.confirm>=100000?data.chinaAdd.confirm:''">较上日+ {{ data.chinaAdd.confirm }}</span>
          <span
              :title="data.chinaAdd.confirm>=1000000000?data.chinaAdd.confirm:''">{{ data.chinaTotal.confirm }}</span>
          <span>累计确诊</span>
        </section>
        <section>
          <span
              :title="data.chinaAdd.localConfirmH5>=100000?data.chinaAdd.noInfect:''">较上日+ {{
              data.chinaAdd.noInfect
            }}</span>
          <span
              :title="data.chinaAdd.noInfect>=1000000000?data.chinaAdd.noInfect:''">{{
              data.chinaTotal.noInfect
            }}</span>
          <span>无症状感染者</span>
        </section>
        <section>
          <span
              :title="data.chinaAdd.importedCase>=100000?data.chinaAdd.importedCase:''">较上日+ {{
              data.chinaAdd.importedCase
            }}</span>
          <span
              :title="data.chinaAdd.importedCase>=1000000000?data.chinaAdd.importedCase:''">{{
              data.chinaTotal.importedCase
            }}</span>
          <span>境外输入</span>
        </section>
        <section>
          <span
              :title="data.chinaAdd.dead>=100000?data.chinaAdd.dead:''">较上日+ {{ data.chinaAdd.dead }}</span>
          <span
              :title="data.chinaAdd.dead>=1000000000?data.chinaAdd.dead:''">{{ data.chinaTotal.dead }}</span>
          <span>累计死亡</span>
        </section>

      </div>
      <!--饼图：用于展示重点城市新增的疫情信息-->
      <div class="wrap-left-pie">
      </div>
      <!--折线图-->
      <div class="wrap-left-line"></div>
    </div>
    <!--地图区域-->
    <div class="wrap-center"></div>
    <!--表格区域-->
    <div class="wrap-right">
      <table>
        <thead>
        <tr>
          <th>地区</th>
          <th>新增确诊</th>
          <th>累计确诊</th>
          <th>治愈</th>
          <th>死亡</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in tableData.children" v-if="tableData.children.length>0">
          <td>{{ item.name }}</td>
          <td>{{ item.today.confirm }}</td>
          <td>{{ item.total.confirm }}</td>
          <td>{{ item.total.heal }}</td>
          <td>{{ item.total.dead }}</td>
        </tr>
        <!--没有点击有效地方-->
        <tr v-else>
          <td>请选择地区</td>
          <td>{{ data.chinaAdd.nowConfirm }}</td>
          <td>{{ data.chinaTotal.confirm }}</td>
          <td>{{ data.chinaTotal.heal }}</td>
          <td>{{ data.chinaTotal.dead }}</td>
        </tr>

        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
import {getList} from "./server"
import './assets/data/china.js'  //echarts的中国地图数据
import {geoCoordMap} from "./assets/data/geoCoordMap"
import * as echarts from 'echarts' //echarts 5

const fontColor = '#e3e3e3' //全局文字颜色
let data = reactive({
  chinaAdd: <ChinaAdd>{}, //约定该属性是ChinaAdd类型的对象
  chinaTotal: <ChinaTotal>{},
  cityDetail: <CityDetail[]>[], //<CityDetail[]> 代表数组元素为CityDetail类型。后面这个[]只是给属性areaTree设立的初始值
  areaTree: <AreaTree[]>{}
})
let tableData = reactive({//定义最右侧表格数据（点击地图给她值）
  name: '',
  children: <Children[]>[]
})
getList().then(res => { //不可直接赋值给data,他是个proxy响应对象
  data.chinaAdd = res.data.diseaseh5Shelf.chinaAdd   // 新增数据
  data.chinaTotal = res.data.diseaseh5Shelf.chinaTotal // 累计数据
  data.cityDetail = res.data.statisGradeCityDetail//国际级城市疫情新增数据
  data.areaTree = res.data.diseaseh5Shelf.areaTree[0].children//国际级城市疫情新增数据
  //渲染echarts
  initPie()
  initLine()
  initMap()
})
//创建饼图
const initPie = () => {
  // 获取dom(必须页面渲染了dom才能操作)
  const pieChart = echarts.init(document.querySelector('.wrap-left-pie') as HTMLLIElement);
  // 去echarts demo 复制样式代码
  let cityData = data.cityDetail.map(v => {
    return {
      name: v.city,
      value: v.nowConfirm
    }
  })
  let option = {
    // 鼠标悬停板块时
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,0.5)',
      color: fontColor,
      formatter: function (params: any) { //悬停标签的内容自定义
        params.color = fontColor //文字设置百色
        return (
            params.marker +
            '<span style="color:' + params.color + '">' +
            params.data['name'] +
            '\n' +
            params.data['value'] +
            '例</span>'
        );
      }
    },
    //圆圈内的字
    title: {
      text: '重点城市',
      subtext: '疫情新增',
      x: 'center',
      y: 'center',
      textStyle: {
        color: fontColor,
        fontWeight: 'normal',
        fontSize: 16
      },
      subtextStyle: {
        color: 'rgba(199,204,205,0.45)'
      },
    },
    color: ['#8d98b3', '#ca8622', '#9898fc', '#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],//每个板块颜色
    grid: {
      bottom: 150,
      left: 100,
      right: '10%'
    },
    legend: {
      show: false,  //标题（右边的）的隐藏 默认是true 为展示
      orient: 'vertical',
      top: "middle",
      right: "5%",
      textStyle: {
        color: fontColor,
        fontSize: 25,
      },
      icon: 'roundRect',
      data: cityData,
    },
    series: [
      // 主要展示层的
      {
        radius: ['40%', '71%'],
        center: ['50%', '50%'],
        type: 'pie',
        label: {
          normal: {
            show: true,
            formatter: "{b}", //每个板块显示的文字:c对应的是数据的value,b对应数据的name
            textStyle: {
              fontSize: 12, //设置文字字体大小
              color: '#d3d3d3'
            },
            position: 'outside'
          },
          emphasis: {
            show: true
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: 15,
            length2: 20
          },
          emphasis: {
            show: true
          }
        },
        name: "民警训练总量",
        data: cityData,

      },
      // 边框的设置
      {
        radius: ['40%', '44%'], //圆的粗细
        center: ['50%', '50%'], // 关于饼图的 x y 水平平移
        type: 'pie',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        animation: false,
        tooltip: {
          show: false
        },
        data: [{
          value: 1,
          itemStyle: {
            color: "rgba(250,250,250,0.3)",
          },
        }],
      },
    ]
  };
  pieChart.setOption(option);//挂载上去
}

//创建折线图
const initLine = () => {
  const lineChart = echarts.init(document.querySelector('.wrap-left-line') as HTMLLIElement);
  //收集所有城市名称、新增的值组成数组
  const cityNames = data.cityDetail.map(v => v.city)
  const cityValues = data.cityDetail.map(v => v.nowConfirm)
  //直接挂载样式
  lineChart.setOption(
      {
        title: {
          text: '重点城市疫情新增折线图',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: fontColor
          },
          left: '6%',
          top: '5%'
        },
        //鼠标悬停显示的标签
        tooltip: {
          show: true,
          backgroundColor: 'rgba(56,65,87,0.37)',
          borderColor: '#8ad7f7',
          borderWidth: 1,
          formatter: '{b} {c}例', //自定义悬停标签的内容。b:x轴的数据；c:y轴数据
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 1);color:#F1F1F3' //内容文字样式
        },
        legend: {
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['南宁-曼芭'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: fontColor
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        //x轴线
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: { //统计图x轴线样式
              color: '#858c9f'
            }
          },
          //x轴数据
          data: cityNames
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#858c9f'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          //分段横轴线
          splitLine: {
            lineStyle: {
              color: '#858c9f'
            }
          }
        }],
        series: [{
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#41b0db'
            }
          },
          data: cityValues
        }]
      }
  )
}

//创建地图
const initMap = () => {
  const mapChart = echarts.init(document.querySelector('.wrap-center') as HTMLLIElement);
  let cityData = data.areaTree.map(item => {
    return {
      name: item.name,
      value: geoCoordMap[item.name].concat(item.total.nowConfirm), //这里有坑，可能geoCoordMap[item.name]没有找到数据，说明地图数据有缺失的地方
      children: item.children
    }
  })
  mapChart.setOption(
      {
        //地图的配置
        series: [
          {
            data: cityData, //每个板块的数据
            type: "map",
            selectedMode: "single",
            mapType: "china",
            aspectScale: 0.8,//设置地图长宽比
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "640px", //上面那一块地图尺寸
            zoom: 0.5, //当前视角的缩放比例
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              normal: {
                show: true, //地图板块标签文字显示
                textStyle: {
                  color: fontColor
                }
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(69,92,121,0.56)', //每个板块的颜色
                borderColor: '#8edfff', //每个板块边缘线颜色
                borderWidth: 1,
              },
            },
          },
          //标志的配置
          {
            data: cityData,//每个标志的数据
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: 40,  //标志的大小
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
                formatter(value: any) {  //重置标志显示的内容
                  return value.data.value[2] //显示数组第三位（存放新增数的）
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#8ad7f7', //标志颜色
              }
            },
            zlevel: 6
          },
        ],
        geo: {
          data: geoCoordMap, //地理坐标数据
          map: "china",
          zoom: 1, //下面那块阴影
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"],
          layoutSize: "640px", //阴影尺寸
          itemStyle: {
            normal: {
              borderColor: 'transparent', //阴影边缘线
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 1200,
                x2: 1000,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#152E6E", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0673AD", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              shadowColor: "rgba(39, 62, 91, 0.73)", //阴影颜色
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              opacity: 0.2 //阴影透明度
            },
            emphasis: {
              areaColor: "red",
            },
          },

          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  // opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
      }
  )
  //获取到点击的省份的数据
  mapChart.on("click", (e: any) => {
    if (e.data.children) { //点击南海诸海之外的地方
      tableData.children = e.data.children
    }
  })
}
</script>

<style>
html, body, #app {
  overflow: hidden;
  height: 100%;
  }

.wrap {
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-image: url('./assets/image/bg.jpg');
  background-repeat: no-repeat;
  }

.wrap-left {
  min-width: 370px;
  height: 100%;
  padding: 10px;
  }

.wrap-center {
  flex: 1;
  min-width: 720px;
  height: 100%;
  }


.wrap-left-card {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  height: 185px;
  margin-bottom: 18px;
  }

.wrap-left-pie {
  width: 100%;
  height: 250px;
  margin-bottom: 18px;
  background-color: rgba(39, 62, 91, 0.63);
  }

.wrap-left-line {
  width: 100%;
  height: 250px;
  background-color: rgba(39, 62, 91, 0.63);
  }

section {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: calc(344px / 3);
  height: calc(185px / 2);
  margin-bottom: 2px;
  margin-left: 2px;
  padding: 10px;
  text-align: center;
  background-color: rgba(39, 62, 91, 0.63);
  }

span {
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
  color: v-bind(fontColor); /*编译器报错忽略*/
  font-size: 14px;
  }

section span:nth-child(2) {
  text-overflow: ellipsis;
  color: #8ad7f7;
  font-size: 18px;
  font-weight: 700;
  }

.wrap-right {
  overflow: auto;
  height: 100%;
  padding: 10px;
  }

table {
  float: right;
  text-align: center;
  color: v-bind(fontColor);
  font-size: 14px;
  background-color: rgba(39, 62, 91, 0.54);
  }

th, td {
  padding: 5px;
  border: 1px solid #757f94;
  }
</style>
